<template>
  <div class="menu-wrapper">
    <office-dialog ref="officeDialog" @confirm="dialogConfirm" />
    <el-form ref="shopForm" :model="form" :rules="rules" label-width="100px">
      <div style="width: 100%;display: flex;align-items: flex-end;border-bottom: 1px #eee solid;margin-bottom: 20px">
        <span style="font-size: 18px;color:#409EFF;margin: 10px 0;">修改信息</span>
      </div>
      <el-form-item label="店铺名称" prop="name">
        <el-col :span="12">
          <el-input v-model="form.name" />
        </el-col>
      </el-form-item>
      <el-form-item label="所属部门" prop="officeId">
        <el-col :span="12">
          <el-input v-model="topName" suffix-icon="el-icon-search" @focus="dialogShow" />
        </el-col>
      </el-form-item>
      <el-form-item label="类型" prop="type">
        <el-col :span="5">
          <el-select style="width: 100%;" v-model="form.type" placeholder="请选择类型" @change="typeChange">
            <el-option v-for="item in typeOptions" :key="item.label + item.value" :label="item.label" :value="item.value" :disabled="typeOneDisabled" />
          </el-select>
        </el-col>
      </el-form-item>
      <el-form-item label="选择店长" prop="managerId" v-if="form.type==0">
        <el-col :span="5">
          <el-select
            v-model="form.managerId"
            style="width: 100%;"
            placeholder="请选择店长"
            filterable
            :filter-method="queryMember"
          >
            <el-option v-for="item in sysEmployeeOptions" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-col>
      </el-form-item>
      <el-form-item label="联系人" prop="linkman">
        <el-col :span="12">
          <el-input v-model="form.linkman" />
        </el-col>
      </el-form-item>
      <el-form-item label="联系电话" prop="telephone">
        <el-col :span="12">
          <el-input v-model="form.telephone" />
        </el-col>
      </el-form-item>
      <el-form-item label="所在地" prop="areaName">
        <el-col :span="12">
          <Distpicker :province="district.province" :city="district.city" :area="district.area" @selected="onSelected" />
        </el-col>
      </el-form-item>
      <el-form-item label="详细地址" prop="address">
        <el-col :span="12">
          <el-input v-model="form.address" />
        </el-col>
      </el-form-item>
      <el-form-item label="具体位置" prop="lat">
        <el-col :span="12">
          <el-button type="primary" round @click="MapShowFn"><i class="el-icon-map-location" /> 点击选择定位</el-button>
        </el-col>
      </el-form-item>
      <el-form-item label="打印机用户">
        <el-col :span="5">
          <el-input v-model="form.printeru" />
        </el-col>
      </el-form-item>
      <el-form-item label="打印机密钥">
        <el-col :span="5">
          <el-input v-model="form.printerp" />
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button v-permission="['shop.edit']" type="primary" :loading="clicked" @click="updateshop('shopForm')">&nbsp&nbsp完 成&nbsp&nbsp</el-button>
      </el-form-item>
    </el-form>
    <el-dialog
      title="请选择具体位置"
      :visible.sync="MapShow"
      top="5vh"
      width="800px"
      :before-close="handleClose"
    >
      <Map :initcenter="[form.lng, form.lat]" @getMap="getMap" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="MapShow = false">取 消</el-button>
        <el-button type="primary" @click="savelngLat">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<style scoped>
  .menu-wrapper{
    margin: 15px;
  }
</style>
<script>
import permission from '@/directive/permission/index.js' // 权限判断指令
import { EventBus } from '@/api/eventBus'
import utils from '../../utils/utils.js'
import OfficeDialog from '@/components/OfficeDialog'
import { find, update } from '@/api/shop'
import Distpicker from '@/components/Distpicker/Distpicker'
import Map from '@/components/GaodeMap/index'
import { list as sysEmployeeList } from '@/api/sysEmployee'
export default {
  name: 'ShopEdit',
  directives: { permission },
  filters: {

  },
  components: {
    OfficeDialog,
    Distpicker,
    Map
  },
  data() {
    return {
      id: '',
      tempLng: '',
      tempLat: '',
      MapShow: false,
      district: {},
      clicked: false, // 按钮防双击
      topName: '',
      typeOneDisabled: false, // 公司类型是否禁用
      typeTwoDisabled: false, // 部门类型是否禁用
      typeOptions: [
        { value: 0, label: '店铺' },
        // { value: 2, label: '仓库' },
        // { value: 1, label: '提货点' }
      ],
      sysEmployeeOptions: [],
      form: {
        id: '',
        name: '',
        officeId: '',
        linkman: '',
        telephone: '',
        status: 0,
        type: 0,
        modifyDate: '',
        address: '', // 地址
        lng: '', // 经度
        lat: '', // 纬度
        printeru: '',
        printerp: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入组织名称', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        officeId: [
          { required: true, message: '请选择所属部门' }
        ],
        linkman: [
          { required: true, message: '请输入联系人', trigger: 'blur' }
        ],
        telephone: [
          { required: true, message: '请输入联系电话', trigger: 'blur' }
        ],
        areaName: [
          { required: true, message: '请选择仓库所在地址' }
        ],
        address: [
          { required: true, message: '请选择仓库详细地址' }
        ],
        lat: [
          { required: true, message: '请选择仓库具体坐标' }
        ],
        type: [
          { required: true, message: '请选择类型', trigger: 'blur' }
        ],
        managerId: [
          { required: true, message: '请选择店长', trigger: 'blur' }
        ]
      }
    }
  },
  watch: { // 路由地址不变的情况下,如果id变化则重新获取数据
    $route(newVal, oldVal) {
      console.log(newVal)
      if (newVal.name == 'shop-edit' && newVal.query.id != this.id) {
        this.getData()
      }
    }
  },
  created() {
    this.getData()
    this.queryMember('')
  },
  methods: {
    queryMember(query) {
      clearTimeout(this.memberMark)
      this.memberMark = setTimeout(() => {
        this.sysEmployeeOptions = []
        sysEmployeeList({ employeeType:0,name: query }).then(res => {
          this.sysEmployeeOptions = res.data.data
        }).catch(err => { console.log(err) })
      }, 300)
    },
    typeChange(e) {
      if (e !== 0) {
        this.form.managerId = ''
      }
    },
    getData() {
      console.log(this.$route.query.id)
      this.id = this.$route.query.id
      find(this.id).then(response => {
        console.log('成功', response)
        this.form = response.data.shop
        const obj = {
          name: response.data.managerName,
          id: this.form.managerId
        }
        this.sysEmployeeOptions.unshift(obj)
        this.topName = response.data.officeName
        console.log(this.form)
        const reg = /.+?(省|市|自治区|自治州|县|区)/g
        // console.log(this.form.address.match(reg)[0])
        this.district.province = this.form.areaName.match(reg)[0]
        this.district.city = this.form.areaName.match(reg)[1]
        this.district.area = this.form.areaName.match(reg)[2]
      }).catch(error => {
        console.log('失败', error)
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    MapShowFn() {
      this.MapShow = !this.MapShow
    },
    getMap(lng, lat) {
      console.log(lng, lat)
      // 定义变量保存经纬度
      this.tempLng = lng
      this.tempLat = lat
    },
    savelngLat() {
      this.form.lng = this.tempLng
      this.form.lat = this.tempLat
      this.MapShow = false
    },
    onSelected(val) {
      if (!utils.isNull(val.city) && !utils.isNull(val.area) && !utils.isNull(val.area.code)) {
        this.form.areaId = val.area.code
        this.form.areaName = val.province.value + val.city.value + val.area.value
        // this.form.areaName = val.area.value
      }
    },
    dialogShow() {
      console.log('点击了')
      this.$refs.officeDialog.show()
    },
    /* dialogConfirm(val) {
      this.form.officeId = val.id
      this.topName = val.name
      if (val.type == 0) {
        this.form.type = 1
        this.typeOneDisabled = false
        this.typeTwoDisabled = false
      } else {
        this.form.type = 1
        this.typeOneDisabled = true
      }
    }, */
    dialogConfirm(val) {
      this.form.officeId = val.id
      this.topName = val.name
    },
    updateshop(form) {
      const _this = this
      this.$refs[form].validate((valid) => {
        if (valid) { // 校验表单
          _this.clicked = true
          const date = new Date()
          this.form.modifyDate = date
          update(_this.form).then(response => {
            console.log(response)
            _this.clicked = false
            EventBus.$emit('shop-edit', response.data)
            _this.$store.dispatch('tagsView/delView', _this.$route).then(({ visitedViews }) => {
              _this.$router.push({
                path: '/shop/list'
              })
            })// 关闭当前tab回到列表
          }).catch(error => {
            _this.clicked = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>
